<?php
defined('SYSPATH') OR die('No direct access allowed.');
/**
 * monthly.php
 * @author ranuandra
 *
 * 21 Sep 2011 15:40:01
 *
 * 
 */
?>
Ext.ns('App', 'App.monthlyreport');
/**
 * App.user.Grid
 * A typical EditorGridPanel extension.
 */
App.monthlyreport.Grid = Ext.extend(Ext.grid.GridPanel, {
    //renderTo: 'user-grid',
    iconCls: 'silk-grid',
    frame: true,
    //title: 'Users',
    height: 500,

    initComponent : function() {

        // typical viewConfig
        this.viewConfig = {
            forceFit: true
        };

        // Typical Store collecting the Proxy, Reader and Writer together.
        this.store = new Ext.data.JsonStore({
            id: 'monthlyreport',
            url: '<?php echo URL::base()?>report/monthly',
            remoteSort: false,
			storeId: 'myStore',
			        
			        // reader configs
			        idProperty: 'id',
			        root: 'monthlyreport',
			        totalProperty: 'total',
			        fields: [{
			            name: 'code'
			        }, {
			            name: 'material_name',
			        }, {
			            name: 'data',
			        },{
			            name: '1',
			            type: 'float'
			        },{
			            name: '2',
			            type: 'float'
			        },{
			            name: '3',
			            type: 'float'
			        },{
			            name: '4',
			            type: 'float'
			        },{
			            name: '5',
			            type: 'float'
			        },{
			            name: '6',
			            type: 'float'
			        },{
			            name: '7',
			            type: 'float'
			        },{
			            name: '8',
			            type: 'float'
			        },{
			            name: '9',
			            type: 'float'
			        },{
			            name: '10',
			            type: 'float'
			        },{
			            name: '11',
			            type: 'float'
			        },{
			            name: '12',
			            type: 'float'
			        }]
        });


        // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
        this.Columns =  [
		    {header: "Code", width: 100, sortable: true, dataIndex: 'code'},
		    {header: "Name", width: 100, sortable: true, dataIndex: 'material_name'},
		    {header: "DATA", width: 100, sortable: true, dataIndex: 'data'},
		    {header: "JAN", width: 100, sortable: true, dataIndex: '1'},
		    {header: "FEB", width: 100, sortable: true, dataIndex: '2'},
		    {header: "MAR", width: 100, sortable: true, dataIndex: '3'},
		    {header: "APR", width: 100, sortable: true, dataIndex: '4'},
		    {header: "MEI", width: 100, sortable: true, dataIndex: '5'},
		    {header: "JUN", width: 100, sortable: true, dataIndex: '6'},
		    {header: "JUL", width: 100, sortable: true, dataIndex: '7'},
		    {header: "AGS", width: 100, sortable: true, dataIndex: '8'},
		    {header: "SEP", width: 100, sortable: true, dataIndex: '9'},
		    {header: "OKT", width: 100, sortable: true, dataIndex: '10'},
		    {header: "NOV", width: 100, sortable: true, dataIndex: '11'},
		    {header: "DEC", width: 100, sortable: true, dataIndex: '12'}
		];
        // relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
        //this.relayEvents(this.store, ['destroy', 'save', 'update']);
        this.store.load();
        Ext.apply(this, {
    		store: this.store,
    		columns: this.Columns,
    		border:false
    	});
        // build toolbars and buttons.
        //this.tbar = this.buildTopToolbar();
        //this.buttons = this.buildUI();
        //this.bbar = this.buildBottomToolbar();

        // super
        App.monthlyreport.Grid.superclass.initComponent.call(this);
    },

    /**
     * buildTopToolbar
     */
    buildTopToolbar : function() {
        return [{
            text: 'Add',
            iconCls: 'silk-add',
            handler: this.onAdd,
            scope: this
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: this.onDelete,
            scope: this
        }, '-'];
    },

    buildUI : function() {
        return [{
            text: 'Save',
            iconCls: 'icon-save',
            handler: this.onSave,
            scope: this
        }];
    },

    /**
     * onSave
     */
    onSave : function(btn, ev) {
        this.store.save();
    },

    /**
     * onAdd
     */
    onAdd : function(btn, ev) {
        var u = new this.store.recordType({
            first : '',
            last: '',
            email : ''
        });
        this.stopEditing();
        this.store.insert(0, u);
        this.startEditing(0, 1);
    },

    /**
     * onDelete
     */
    onDelete : function(btn, ev) {
        var index = this.getSelectionModel().getSelectedCell();
        if (!index) {
            return false;
        }
        var rec = this.store.getAt(index[0]);
        this.store.remove(rec);
    }
});